.wrapper {
    position: absolute;
    right: 0px;
    top: 4%;
    padding:0 0px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.toggler {
    -webkit-animation: showToggler 200ms ease-out;
    animation: showToggler 200ms ease-out;
    cursor: pointer;
    height: 25px;
    margin: 10px 0;
}
.toggler .choices {
    -webkit-transition: background-color 200ms ease-out;
    transition: background-color 200ms ease-out;
    cursor: pointer;
    position: relative;
    display: block;
    width: 100%;
    height: 25px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    background-color: green;
    z-index: 2;
}
.toggler .choices:before,
.toggler .choices:after {
    -webkit-transition: background-color 300ms ease-out;
    transition: background-color 300ms ease-out;
    content: '';
    position: absolute;
    top: 0;
    width: 25px;
    height: 25px;
    background-color: green;
    border-radius: 100%;
    z-index: 1;
}
.toggler .choices:before {
    left: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.toggler .choices:after {
    right: 0;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
}
.toggler .choice {
    -webkit-transition: opacity 200ms ease-out;
    transition: opacity 200ms ease-out;
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: block;
    width: 50%;
    height: 25px;
    font: 1.1rem/25px Verdana;
    text-transform: uppercase;
    color: #fff;
    z-index: 2;
}
.toggler .on ,
.toggler .off 
{
  font-size:15px;
}
.toggler .on 
{
    opacity: 0;
}
.toggler .knob {
    -webkit-animation: inactiveKnob 200ms ease-out;
    animation: inactiveKnob 200ms ease-out;
    -webkit-transition: left 200ms ease-out;
    transition: left 200ms ease-out;
    position: absolute;
    left: 1px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
    width: 0;
    height: 20px;
    background: white;
    z-index: 3;
}
.toggler .knob:before,
.toggler .knob:after {
    content: '';
    position: absolute;
    top: 0;
    width: 19px;
    height: 19px;
    border-radius: 100%;
    background: #fff;
}
.toggler .knob:before {
    left: -10px;
}
.toggler .knob:after {
    right: -9px;
}
.toggler .toggler-input:checked + .choices {
    background: green;
}

.toggler .toggler-input:checked + .choices .knob {
    -webkit-animation: activeKnob 200ms ease-out forwards;
    animation: activeKnob 200ms ease-out forwards;
    left: 99%;
}
.toggler .toggler-input:checked + .choices .on {
    opacity: 1;
}
.toggler .toggler-input:checked + .choices .off {
    opacity: 0;
}

.banquan_footer{
        height: 45px;
        line-height: 20px;
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
      
        color: black;
        font-family: Arial;
        font-size: 14px;
        letter-spacing: 1px;
        margin-top:500px;
        
    }
    
 	.back {
		color: #fff;
		float: left;
	}
	
	.title_ {
		background-color: rgb(47, 64, 80);;
		color: #fff;
		text-align: center;
	}
	.title_ p {
		margin-right: 15px;
		line-height: 40px;
		float: right;
	}
	.title_ h4 {
		line-height: 33px;
		display: flex;
    	margin-left: 15px;
    	float: left;
	}
	.image-circle {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		float: right;
	}
	.state {
		color: #fff;
    	background-color: #c2c2c2;
    	border: none;
	}